.--react-element {
  height: px2rem(88);
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(221, 221, 221);
  background: #fff;

  &.down {
    .right-ico {
      transform: rotate(90deg);
    }
  }

  &.react-select {
    display: block;

    .react-select__control {
      min-height: 100%;
    }

    .react-select__indicators {
      display: none;
    }

    .react-select__value-container {
      padding-left: px2rem(20);
    }

    .react-select__control--is-disabled {
      background: #fff;
    }
  }

  &:last-child {
    border-bottom: 1px solid rgb(221, 221, 221);
  }

  .ico {
    flex-shrink: 0;
    width: px2rem(48);
    height: px2rem(48);
  }

  .group {
    padding-left: px2rem(20);
    flex-shrink: 1;
    flex-grow: 1;

    input {
      display: block;
      width: 100%;
      vertical-align: middle;
      padding: px2rem(15) 0;
      max-height: 100%;
      background: transparent;
    }
  }
}

.--react-button,
.--react-button:visited {
  display: block;
  width: 100%;
  height: px2rem(88);
  line-height: px2rem(88 - 40);
  box-sizing: border-box;
  margin: 0 auto;
  background: rgb(26, 124, 194);
  padding: px2rem(20) 0;
  text-align: center;
  color: #fff;
  transition: .1s linear;
  border-radius: px2rem(10);

  &[touch="active"] {
    background: darken(rgb(26, 124, 194), 10%);
  }

  &[disabled] {
    background: #ddd;
    color: #999;
  }
}

.--react-link {

  &.off {
    color: hsl(0, 0%, 50%);
  }

  .placeholder-link-highlight {
    color: #222;
  }

  .group {
    height: 100%;
  }

  .--link {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;


  }

  span {
    flex-shrink: 0;

  }

  .right-ico {
    position: relative;
    margin: 0 px2rem(10);
  }
}

.--react-label {
  color: #555;

  .group {
    display: flex;
    align-items: center;
  }

  .--react-label-title {
    color: #222;
  }

  .right-ico {
    position: relative;
    margin: 0 px2rem(10);
  }

  .--right-text {
    padding-right: px2rem(20);
  }
}

.column-title-container {
  border-bottom: px2rem(20) solid rgb(243, 247, 248);

  .header {
    overflow: hidden;
    height: px2rem(88);
    border-bottom: 1px solid rgb(221, 221, 221);
    display: flex;
    align-items: center;
    justify-content: space-between;

    &:before {
      content: '';
      position: relative;
      width: px2rem(6);
      height: px2rem(28);
      margin: 0 px2rem(16) 0 px2rem(20);
      background: rgb(26, 124, 194);
      flex-shrink: 0;
    }

    span:last-child {
      //margin-right: px2rem(20);
      flex-shrink: 0;
    }

    > span:first-child {
      flex-grow: 1;
      font-weight: bold;
      margin: 0;
    }

    .link {
      flex-shrink: 0;
      padding: px2rem(10) px2rem(13);

      > span {
        display: inline-block;
        vertical-align: middle;
        color: rgb(85, 85, 85);
      }

      &:after {
        content: '';
        position: relative;
        display: inline-block;
        vertical-align: middle;
        @include wTh(30);
        @include bk("/home/ic-right@3x.png", center no-repeat);
        background-size: contain;
        margin-left: px2rem(4);
      }
    }
  }

  .children-group {
    display: flex;
    flex-wrap: wrap;

    > div {
      flex-shrink: 0;
      flex-grow: 1;
      max-width: 100%;
    }
  }
}

.column-common-display {
  display: flex;
  padding: px2rem(16) 0;

  &.--event-list-main-page {
    .info {
      .title {
        .status {
          margin-right: px2rem(0);
          margin-left: px2rem(16);
          border-radius: px2rem(8);
          color: rgb(255, 66, 97);
          box-shadow: 0 0 0 1px rgb(255, 66, 97);
          background: transparent;
        }
      }
    }
  }

  &:not(:last-child) {
    border-bottom: 1px solid #ddd;
  }

  .img {
    margin: 0 px2rem(20);
    flex-shrink: 0;
    max-width: 180px;
    max-height: 180px;
    width: px2rem(180);
    height: px2rem(180);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    .img-loading {
      width: 50% !important;
      height: 50% !important;
    }
  }

  .info {
    flex-grow: 1;

    .title {
      padding-right: px2rem(23);

      > div {
        line-height: px2rem(38);
      }

      div {
        display: inline-block;
        vertical-align: middle;
        position: relative;
      }

      .status {

        &:before {
          content: '';
          display: inline-block;
          height: px2rem(27);
          vertical-align: middle;
          width: 0;
        }

        line-height: px2rem(27);
        margin-right: px2rem(10);
        display: inline-block;
        vertical-align: middle;
        height: px2rem(27);
        box-shadow: 0 0 0 px2rem(1) #1a7cc2;
        padding: px2rem(2) px2rem(6);
        white-space: nowrap;
        border-radius: 999px;
        background: #1a7cc2;
        color: #fff;
      }

      span {
        vertical-align: middle;
      }
    }

    .column {
      display: flex;
      flex-wrap: wrap;
      margin-top: px2rem(20);

      .count {
        margin-right: px2rem(40);

        span:first-child {
          color: rgb(26, 124, 194);
        }
      }

      span {
        color: rgb(92, 92, 92);
      }

      .location {
        margin-right: px2rem(36);
        display: flex;
        align-items: center;

        &:before {
          content: '';
          width: px2rem(30);
          height: px2rem(30);
          background: url('~@images/home/ic-location@3x.png') no-repeat center;
          display: inline-block;
          margin-right: px2rem(7);
          background-size: contain;
        }
      }

      &.loc-main {
        margin-top: px2rem(13);

        .location {
          margin-right: px2rem(20);

          &:before {
            display: none;
          }
        }

        .time-range {
          margin-bottom: px2rem(11);
        }
      }

      &.time-main {
        margin-top: px2rem(2);

        .count {
          color: #1a7cc2;
          margin-right: px2rem(30);
        }

        .count span:first-child {
          color: #555;
        }

        .time .blue {
          color: #1a7cc2;
        }
      }
    }
  }
}

.column-event-display {
  flex-grow: 1;

  .image-loadable.fail {
    background: #f5f5f5;
  }

  .info .title {
    .stop {
      background: #999;
      box-shadow: 0 0 0 #999;
      color: #fff;
    }

    .activities {
      background: #fabf19;
      box-shadow: 0 0 0 #fabf19;
      color: #fff;
    }
  }
}

.column-project-display {
  flex-shrink: 0;
  height: px2rem(400);
  margin: px2rem(17) px2rem(20) px2rem(15);
  width: px2rem(710);
  flex-grow: 1;
  max-height: px2rem(400);
  position: relative;
  background: rgba(240, 240, 240, .2);
  display: block;

  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: inherit;
    max-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    &:before {
      content: '';
      position: absolute;
      z-index: 0;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      background: rgba(0, 0, 0, .05);
    }

  }

  .img-loading {
    position: relative;
    z-index: 1;
    width: px2rem(50) !important;
    max-width: 50px;
    height: px2rem(50) !important;
    max-height: 50px;
  }

  .group {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    div,
    span {
      color: #fff;
      font-weight: bold;
      text-shadow: 0 0 2px #000;
    }

    .space {
      flex-shrink: 0;
      flex-grow: 1;
    }

    > div {
      margin-left: px2rem(22);
    }

    .background-black {
      background: rgba(0, 0, 0, .15);
      margin-left: 0;
      padding-left: px2rem(22);
      padding-top: px2rem(22);
    }

    .info {
      margin-top: px2rem(5);
      margin-bottom: px2rem(20);
    }

    .end-time {
      margin-right: px2rem(25);
    }

    .state {
      padding: 0 px2rem(11);
      line-height: px2rem(32);
      box-shadow: 0 0 0 1px #fff;
      border-radius: 9999px;
    }
  }
}

.--react-search {
  background: #f3f3f3;
  width: 100%;
  position: relative;
  overflow: hidden;

  .--container {
    flex-grow: 1;
    position: relative;
    margin: px2rem(13) px2rem(38);
    background: #fff;
    box-shadow: 0 0 0 1px #ddd;
    border-radius: px2rem(10);

    input {
      padding: px2rem(17) px2rem(60) px2rem(17) 0;
      width: 100%;
      box-sizing: border-box;
    }

    > div {
      flex-grow: 1;
      flex-shrink: 0;
    }

    > label {
      flex-grow: 0;
      flex-shrink: 0;
      margin: 0 px2rem(10) 0 px2rem(28);
      width: px2rem(40);
      max-width: 40px;
      height: px2rem(40);
      max-height: 40px;
      background: url('~@images/plugins/ic-search@3x.png') no-repeat center;
      background-size: contain;
    }
  }

  .--close {
    position: absolute;
    right: 0;
    height: 100%;
    width: px2rem(60);
    display: flex;
    top: 0;
    align-items: center;
    justify-content: center;

    &.on {
      .--bg {
        opacity: 1;
        visibility: visible;
      }
    }

    .--bg {
      position: relative;
      background: #555555;
      border-radius: 50%;
      @include Width(30);
      @include Height(30);
      transition: .1s linear;
      visibility: hidden;
      opacity: 0;

      &:before,
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        height: 1px;
        width: 100%;
        margin-top: -1px;
        transform-origin: center;
        background: #fff;
        border-radius: 999px;
        transform: rotate(-45deg) scale(.6);
      }

      &:after {
        transform: rotate(45deg) scale(.6);
      }
    }
  }
}

.column-item-expert {
  margin: 0 auto;
  overflow: hidden;
  align-items: flex-start;
  flex-wrap: nowrap;

  .fail {
    background: #f3f4f5;
  }

  &:not(:last-child) {
    border-bottom: 1px solid #ddd;
  }

  .item {
    margin: px2rem(18) px2rem(24) px2rem(18) px2rem(20);
    flex-shrink: 0;
    flex-grow: 0;
  }

  .info {
    flex-grow: 1;
    align-items: flex-start;
    margin-top: px2rem(18);

    .name {
      margin-bottom: px2rem(16);
      padding-right: px2rem(10);

      span:first-child {
        display: inline;
      }

      span {
        display: inline-block;
        vertical-align: middle;
      }
    }

    .text {
      line-height: px2rem(45);
    }

    .type {
      padding: px2rem(3) px2rem(8);
      box-shadow: 0 0 0 1px #1a7cc2;
      color: #1a7cc2;
      line-height: px2rem(56);
      height: px2rem(56);
      border-radius: px2rem(20);
      margin-left: px2rem(18);
      transform: scale(.5);
      transform-origin: left center;
      white-space: nowrap;
    }

    .worker {
      margin-bottom: px2rem(24);
      color: #5c5c5c;
      line-height: px2rem(34);
      padding: px2rem(3) px2rem(10) px2rem(3) 0;

      span:first-child {
        margin-right: px2rem(14);
      }

      span:last-child {
        margin-right: 0;
      }
    }
  }

  .work-type {
    color: #1a7cc2;
    position: relative;
    line-height: px2rem(30);
    height: px2rem(30);

    span {
      display: inline-block;
      padding-right: px2rem(10);
      margin-right: px2rem(10);
      position: relative;
    }

    span:not(:last-child):after {
      content: '';
      position: absolute;
      right: 0;
      height: px2rem(20);
      margin-top: px2rem(5);
      width: 1px;
      background: #1a7cc2;
    }
  }
}

.--personnel-info-item {
  padding: px2rem(20);
  box-sizing: border-box;

  &:not(:last-child) {
    border-bottom: 1px solid #ddd;
  }

  .item {
    float: left;
    position: relative;
    @include wTh(180);
    margin-right: px2rem(25);
  }

  .--info {
    overflow: hidden;
    white-space: pre-wrap;
  }

  .work {
    margin: px2rem(5) 0;
    color: #999999;

    .-type {
      margin-right: px2rem(18);
    }
  }

  .summary {
    .summary-ellipsis {
      line-height: px2rem(34);
      margin: 0;
    }

    .display-show {
      margin: 1px 0 0;
    }

    article {
      padding: 0;
    }
  }
}

.-message-item {
  display: flex;
  flex-wrap: nowrap;
  padding: px2rem(20);

  &:not(:last-child) {
    border-bottom: 1px solid #ddd;
  }

  .info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-size: 0;

      span {
        vertical-align: middle;
      }
    }

    .advise {
      display: inline-block;
      line-height: px2rem(28);
      padding: 0 px2rem(8);
      box-shadow: 0 0 0 1px #1a7cc2;
      color: #1a7cc2;
      border-radius: px2rem(5);
    }

    .category {
      font-size: 0;
      color: #999;

      span:first-child {
        margin-right: px2rem(26);
      }
    }
  }

  .-img {
    flex-shrink: 0;
    @include wTh(180);

    &.fail {
      background: #f3f4f5;
    }
  }
}

.--column-message-item {

}

.--info-message-item {

}

.--column-tv-display {
  padding: px2rem(20) 0 0;
  display: block;

  &:not(:last-child) {
    border-bottom: 1px solid #ddd;
  }

  .summary-img {
    @include Height(400);
    @include Width(710);
    margin: 0 auto;

  }

  .-title {
    padding: px2rem(12) px2rem(20) px2rem(22);
    line-height: px2rem(40);

    span {
      vertical-align: middle;
    }

    .category {
      display: inline-block;
      line-height: px2rem(25);
      height: px2rem(25.5);
      box-shadow: 0 0 0 1px #1a7cc2;
      color: #1a7cc2;
      margin-left: px2rem(16);
      padding: 1.5px px2rem(6);
      border-radius: px2rem(10);
    }
  }

  .-image-group {
    position: relative;
    margin: 0 px2rem(20);

    &:before {
      content: '';
      z-index: 1;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, .1);
    }

    .view-state {
      position: absolute;
      bottom: px2rem(20);
      //20是从总宽750-宽度710 除以2得到
      right: px2rem(24 + 20);
      color: #fff;
      text-shadow: 0 0 3px #999;
      z-index: 2;
    }

    .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: px2rem(-45);
      margin-top: px2rem(-45);
      z-index: 2;
    }
  }
}

.--react-textarea {
  width: 100%;
  display: block;
  text-align: left;

  textarea {
    display: block;
    width: 100%;
    padding: 0;
  }
}

.--react-upload {
  $scale: 126 / 77;

  .weui-cell {
    padding: px2rem(20);
  }

  .weui-cells {
    margin: 0;
    font-size: unset;
  }

  .weui-uploader__input-box {
    width: px2rem(77 * $scale);
    height: px2rem(77 * $scale);
    margin-right: px2rem(18 * $scale);

    &:before {
      height: px2rem(39.5 * $scale);
    }

    &:after {
      width: px2rem(39.5 * $scale);
    }
  }

  .weui-uploader__file {
    width: px2rem(79 * $scale);
    height: px2rem(79 * $scale);
    margin-right: px2rem(18 * $scale);
  }
}

.--react-native-date {
  &:last-child {
    .--react-element {
      border-bottom: 1px solid #ddd;
    }
  }

  .--react-element:last-child {
    border-bottom: none;
  }

  input[type="date"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
  }
}

.weui-gallery.hide-delete-btn {
  .weui-gallery__del {
    display: none;
  }
}